<template>
    <div class="content">
        <header>
               确认订单
        </header>

        <!-- 收货信息 -->
        <div class="order-info">
            <h5>订单配送至：</h5>
            <div @click="todeliverypage()">
                   <p>{{deliveryAddress}}</p> 
                   <i class="fa fa-angle-right"></i>
            </div>
            <p>{{contactName}} {{contactTel}}</p>
        </div>


        <!-- 商家名称 -->
        <div class="business-name">
            <h3>{{businessName}}</h3>
        </div>


        <!-- 食品列表 -->
        <ul class="food-list">
            <li v-for="(item,index) in cartlist" :key="index">
                <div class="food-list-left">
                    <img :src="item.food.foodImg" alt="">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                </div>
                <div class="food-list-right">
                    &#165;{{item.food.foodPrice}}
                </div>
            </li>
            <li>
                <div class="food-list-left">
                    <p style="margin-left: 0;">配送费</p>
                </div>
                <div class="food-list-right">
                    <p>&#165;{{deliveryPrice}}</p> 
                </div>
            </li>
        </ul>
   

          <!-- 支撑部分 -->
        <div class="footer-top">

        </div>
        <!-- 底部菜单 -->
        <div class="footer">
            <div class="footer-left">
                &#165;{{allprice}}
            </div>
            <div class="footer-right" @click="topayment()">
                去支付
            </div>
         </div>
    </div>
</template>


<script>
export default {
    name:'Orders',
    data() {
        return {
        businessId: this.$route.query.businessId,
        user:'',
        cartlist:[],
        businessName:'',
        deliveryPrice:0,
        deliveryAddress:'请选择配送地址',
        contactName:'',
        contactTel:'',
        deliveryAddressInfo:{}
        }
    },
    computed:{
        allprice(){
            let allprice = 0;
            for(let cart of this.cartlist){
                   allprice+= cart.quantity*cart.food.foodPrice;
            }
            return allprice+this.deliveryPrice;
        }
    },
    created(){
        this.user = this.$getSessionStorage("user");
        this.deliveryAddressInfo = this.$getLocalStorage(this.user.userId);
        if(this.deliveryAddressInfo != null){
            this.deliveryAddress = this.deliveryAddressInfo.address; 
            this.contactTel = this.deliveryAddressInfo.contactTel;
            this.contactName = this.deliveryAddressInfo.contactName;
        }

        this.$axios
        .get(
          "/CartController/listCart/"+this.user.userId+"/"+this.businessId
        )
        .then((response) => {
           this.cartlist = response.data.data;
           this.businessName = this.cartlist[0].business.businessName;
           this.deliveryPrice = this.cartlist[0].business.deliveryPrice;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    methods:{
        todeliverypage(){
            this.$router.push({path:'/useraddress',query:{businessId:this.businessId}});
        },
        topayment(){
            if(this.deliveryAddressInfo==null)
            {
                alert("没有订餐地址");
            }
            let url=`/OrdersController/createOrders/${this.user.userId}/${this.businessId}/${this.deliveryAddressInfo.daId}/${this.allprice}`
            this.$axios.post(
          url
        )
        .then((response) => {
           let orderSn = response.data.data;
           console.log(response.data)
           if(orderSn > 0){
               //跳转到payment页
                this.$router.push({path:'/payment',query:{orderSn:orderSn}});
           }else{
               //失败
               alert("订单创建失败");
           }
        })
        .catch((error) => {
          console.log(error);
        });
        }
    }
}
</script>


<style scoped>
/* 总容器 */
.content{
    width: 100%;
    height: 100%;
}
/* 头部 */
.content header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    font-size: 4.8vw;
    color: #FFF;
    text-align: center;
    line-height: 12vw;
    position: fixed;
    top: 0vw;
    left: 0vw;
    z-index: 999;
}

.footer-top{
    width: 100%;
    height: 12vw;
}
/* 收货信息 */
.content .order-info{
    margin-top: 12vw;
    background-color: #0097ef;
    box-sizing: border-box;
    padding: 2vw;
    color: #FFF;
}
.content .order-info h5{
    font-size: 3vw;
    font-weight: 300;
}
.content .order-info div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    margin: 1vw 0;
    cursor: pointer;
}
.content .order-info div p{
   font-size: 5vw;
}
.content .order-info div i{
    font-size: 6vw;
}
.content .order-info p{
    font-size: 3vw;
}
/* 商家名称 */
.content .business-name{
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: 1px solid #DDD;
}
/* 食品列表 */
.content .food-list{
    width: 100%;
}
.content .food-list li{
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content .food-list li .food-list-left{
    display: flex;
    align-items: center;
}
.content .food-list li .food-list-left img{
    width: 10vw;
    height: 10vw;
}
.content .food-list li .food-list-left p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.content .food-list li .food-list-right{
    font-size: 3.5vw;
}


/* 底部菜单 */
.content .footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 14vw;
    display: flex;
    color: #FFF;
}
.content .footer .footer-left{
    flex: 2;
    background-color: #505051;
    font-size: 4.5vw;
    font-weight: 700;
    line-height: 14vw;
    text-align: center;
}
.content .footer .footer-right{
    flex: 1;
    background-color: #38CA73;
    font-size: 4.5vw;
    font-weight: 700;
    line-height: 14vw;
    text-align: center;
}
</style>